<template>
  <div class="app-container calendar-list-container">
    <el-form class="small-space" :model="reqData" label-position="left" label-width="90px" :inline="true">

      <div class="form-box">
        <span class="hr-text">类型</span>
        <el-form-item label="是否开启编辑" style="float: right" label-width="100px">
          <el-switch
            v-model="isEdit_g"
            on-color="#13ce66"
            off-color="#ff4949">
          </el-switch>
        </el-form-item>
        <hr class="hr-color"/>
        <el-form-item label="核算单类型" label-width="90px">
          <el-select v-model="reqData.compute_info.type" :disabled="reqData.compute_id ? true : false" clearable placeholder="请选择">
            <el-option
              v-if="!reqData.compute_info.type"
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
            <el-option
              v-if="reqData.compute_info.type"
              :key="reqData.compute_info.type"
              :label="options[reqData.compute_info.type - 1].label"
              :value="reqData.compute_info.type">
            </el-option>
          </el-select>
        </el-form-item>
      </div>

      <!-- 头信息 -->
      <create-compute-head :reqData="reqData" :isEdit_g="isEdit_g"></create-compute-head>

      <!-- 制品明细 -->
      <create-compute-products :reqData="reqData"></create-compute-products>

      <!-- 成本明细 -->
      <create-compute-cost-detail v-if="reqData.compute_id" :reqData="reqData" :isEdit_g="isEdit_g"></create-compute-cost-detail>

      <!-- 材料费明细 -->
      <create-compute-parts
        :computeId="reqData.compute_id"
        :req_part="req_part"
        :partListCol="partListCol"
        v-if="reqData.compute_id" @changePart="getVal"></create-compute-parts>

      <!-- 加工费明细 -->
      <create-compute-process :req_process="req_process" v-if="reqData.compute_id"></create-compute-process>

      <el-button
        v-if="!reqData.compute_id"
        type="primary"
        size="large"
        style="margin: 10px auto;width: 100%;"
        @click.native="save">保存信息</el-button>
      <el-button
        v-if="reqData.compute_id"
        type="primary"
        size="large"
        style="margin: 10px auto;width: 49%;"
        @click.native="save">保存信息</el-button>
      <el-button
        v-if="reqData.compute_id"
        type="primary"
        size="large"
        style="margin: 10px auto;width: 49%;"
        @click.native="">开始审批</el-button>
    </el-form>

  </div>
</template>

<script>
  import {
    addCompute,
    moldDetail,
    computeProcess,
    processDetail,
    modifyPart,
    getPartList,
    accDetailPart,} from '@/api/cstOrder/compute'
  import createComputeHead from './createCompute_head.vue'
  import createComputeProcess from './createCompute_process.vue'
  import createComputeCostDetail from './createCompute_costDetail.vue'
  import createComputeProducts from './createCompute_products.vue'
  import createComputeParts from './createCompute_parts.vue'

  export default {
    components: {
      createComputeHead,
      createComputeProcess,
      createComputeCostDetail,
      createComputeProducts,
      createComputeParts
    },
    name: 'createCompute',
    data() {
      return {
        partListCol:'',
        partInfo:{},
        isEdit_g:true,
        showPartDialog:false,
        options: [{
          value: '1',
          label: '冲压模'
        }, {
          value: '2',
          label: '压铸模'
        }, {
          value: '3',
          label: '注塑模'
        }],
        reqData:{
          compute_id:'',
          client_type:1,
          company_id:'',
          company_name:'',
          dep_id:'',
          dep_name:'',
          compute_info:{
            cst_company_id:'',
            cst_company_name:'',
            cst_mold_no:'',
            type:'',
            cst_products:[],
            delivery_cost:'',
            design_cost:'',
            manage_cost:'',
            material:'',
            mold_cost:'',
            mold_up:'',
            post_box_cost:'',
            process_cost:'',
            profit_cost:'',
            stuff_cost:'',
            try_mold_cost:'',
            compute_date:'',
          }
        },
        req_part:{   //新增零部件接口请求参数
          client_type:1,
          compute_id:'',
          part_list:[]   //零部件列表
        },
        req_process:{
          client_type:1,
          compute_id:'',
          process_list:[]
        },
      }
    },
    mounted() {
      let compute_id = this.$route.query.compute_id
      if(compute_id){
        this.reqData.compute_id = compute_id
        let request_data = {
          clinet_type:1,
          compute_id:compute_id
        }
        moldDetail(request_data)//如果路由参数中带有compute_id则获取核算单详细信息
          .then(res => {
            let isEdit = false
            for(let i of res.cst_products){
              i.isEdit = isEdit
            }
            this.reqData.compute_info = res

            getPartList(request_data)//成功获取核算单信息后,调用接口获取材料明细
              .then(res => {
                console.log(res)
                this.req_part.part_list = res.part_list
              })
              .catch(err => {
                console.log(err)
              })

            processDetail(request_data)//核算单详细信息获取成功后就去取加工费信息
              .then(res => {
                let isEdit = false
                for(let i of res.process_list){
                  i.isEdit = isEdit
                }
                this.req_process.process_list = res.process_list
              })
              .catch(err => {
                console.log(err);
              })
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    methods: {
      getVal(val){
        this.partListCol = val
      },
      save(){
        if(!this.reqData.compute_info.type){
          this.$message.error('必须填写核算单类型!')
        }else{
          if(this.reqData.compute_id){
            //将日期转为指定格式的字符串
            this.reqData.compute_info.compute_date = format(new Date(this.reqData.compute_info.compute_date),'yyyy-MM-dd')
            this.partListCol = ''
            addCompute(this.reqData)//保存核算单信息
              .then(res => {
                this.reqData.compute_id = res.compute_id
                this.req_part.compute_id = this.reqData.compute_id
                this.req_process.compute_id = this.reqData.compute_id

                let request_data = {
                  clinet_type:1,
                  compute_id:this.reqData.compute_id
                }

                moldDetail(request_data)//核算单信息保存成功后再获取一下核算单信息,主要是为了获取制品信息的id(制品信息是单独的表,修改的时候需要id)
                  .then(res => {
                    let isEdit = false
                    for(let i of res.cst_products){
                      i.isEdit = isEdit
                    }
                    this.reqData.compute_info = res
                  })
                  .catch(err => {
                    console.log(err)
                  })

                if(this.req_part.part_list.length > 0){//如果有材料零部件信息则保存
                  modifyPart(this.req_part)
                    .then(res => {
                      getPartList(request_data)//保存之后再取一下数据,为了part_id
                        .then(res => {
                          this.req_part.part_list = res.part_list
                        })
                        .catch(err => {
                          console.log(err)
                        })
                      console.log(res)
                    })
                    .catch(err => {
                      console.log(err)
                    })

                }
                if(this.req_process.process_list.length > 0){//如果有加工费信息则保存加工费
                  computeProcess(this.req_process)
                    .then(res => {
                      let request_data = {
                        clinet_type:1,
                        compute_id:this.reqData.compute_id
                      }
                      processDetail(request_data)//保存加工费成功后再取一下数据,主要是为了获取加工费id(加工费是单独的表,修改的时候需要id)
                        .then(res => {
                          let isEdit = false
                          for(let i of res.process_list){
                            i.isEdit = isEdit
                          }
                          this.req_process.process_list = res.process_list
                        })
                        .catch(err => {
                          console.log(err);
                        })
                      console.log(res);
                    })
                    .catch(err => {
                      console.log(err)
                    })
                }
                this.$message({
                  message:'保存成功!',
                  type:'success'
                })
              })
              .catch(err => {
                this.$message.error('保存失败!')
                console.log(err);
              })
          }else{
            //将日期转为指定格式的字符串
            this.reqData.compute_info.compute_date = format(new Date(this.reqData.compute_info.compute_date),'yyyy-MM-dd')
            addCompute(this.reqData)//保存核算单信息
              .then(res => {
                this.reqData.compute_id = res.compute_id

                let request_data = {
                  clinet_type:1,
                  compute_id:this.reqData.compute_id
                }
                moldDetail(request_data)//核算单信息保存成功后再获取一下核算单信息,主要是为了获取制品信息的id(制品信息是单独的表,修改的时候需要id)
                  .then(res => {
                    let isEdit = true
                    for(let i of res.cst_products){
                      i.isEdit = isEdit
                    }
                    this.reqData.compute_info = res
                  })
                  .catch(err => {
                    console.log(err)
                  })

                this.$message({
                  message:'保存成功!',
                  type:'success'
                })
              })
              .catch(err => {
                this.$message.error('保存失败!')
                console.log(err);
              })
          }
        }
      },
    },
    /*beforeRouteLeave(to,from,next){//如果不想缓存当前页面就销毁
      this.$destroy()
      next()
    }*/
  }
</script>

<style lang="scss">
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
  .hr-text{
    color: #BFBFBF;
  }
  .hr-color{
    color: #e0e0e0;
    background-color: #e0e0e0;
    /*height: 0.5px;*/
    border: 0.5px solid #e0e0e0;
  }
  .form-box{
    margin-bottom: 20px;
  }
</style>
